/*
 * @Author: your name
 * @Date: 2020-07-28 23:41:16
 * @LastEditTime: 2020-07-29 22:43:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \react-hooks-app\src\demo2\demo2.js
 */


import React, { useState,useMemo } from 'react'

import UserRefDemo from './userRefDom'
import useWinSize from '../hooks/useWinSize'
function UserMemoDemo(){

  let [xiaohong,setXiaoHong] = useState('小红在待客状态');
  let [zingling,setling] = useState('志玲在待客状态');

  const winSize = useWinSize()

  return (
    <div>
      <h1>窗口宽{winSize.width}</h1>
      <h2>窗口高{winSize.height}</h2>
      <button onClick={()=>{setXiaoHong(new Date().getTime())}}>小红</button>
      <button onClick={()=>{setling(new Date().getTime()+',志玲向我们走来了')}}>志玲</button>
      <ChilldCom xiaohong={xiaohong} zingling={zingling}></ChilldCom>
      <hr></hr>
      <h2>UserRefDemo</h2>
      <UserRefDemo></UserRefDemo>
    </div>
  );
}

const ChilldCom = ({xiaohong,zingling})=>{

  function changeXiaohong(xiaohong){
    console.log('她来了，她来了。小红向我们走来了')
    return  xiaohong+',小红向我们走来了'
  }

  //当zingling 数据改变的时候，不执行setXiaoHong

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const actionXionghong =useMemo(()=>{return changeXiaohong(xiaohong)},[xiaohong])

  console.log('reding........')
  return (
    <>
     <div>{actionXionghong}</div>
     <div>{zingling}</div>
    </>
  );
}


export default UserMemoDemo;
